<template>
    <div class="mb-64">
        <div class="p-32 text-3xl text-center text-slate-800">教学案例列表</div>
        <div
            class="max-w-[1600px] px-[100px] mx-auto grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-8"
        >
            <div
                class="flex flex-col case-item overflow-hidden rounded-2xl p-4"
                v-for="item in caseListData"
                @click="toCase(item)"
                :key="item.key"
            >
                <div
                    style="aspect-ratio: 16 / 9"
                    class="w-full rounded-xl overflow-hidden border-blue-100 border"
                >
                    <el-image :src="item.poster" class="poster h-full w-full">
                        <template #error>
                            <div class="">
                                <el-icon :size="100" color="#ededed"
                                    ><Picture
                                /></el-icon>
                            </div>
                        </template>
                    </el-image>
                    <!-- <img class="" :src="item.poster" alt="" /> -->
                </div>
                <div class="p-2 text-lg font-bold text-slate-800">
                    {{ item.title }}
                </div>
                <div class="p-2 pt-0 text-slate-400">
                    {{ item.description }}
                </div>
                <div class="p-2 pt-0 text-blue-400 text-right mt-auto">
                    前往查看 >
                </div>
            </div>
            <div
                class="flex flex-col case-item overflow-hidden rounded-2xl p-4"
                v-if="localhostDevServerStore.available"
                @click="createCase"
            >
                <div
                    style="aspect-ratio: 16 / 9"
                    class="w-full rounded-xl overflow-hidden border-blue-100 border"
                ></div>
                <div class="p-2 text-lg font-bold text-slate-800">新建</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { createCaseApi } from '@/apis/localhost/boardSave'
import { getListUnauth } from '@/apis/unauthCrud'
import { useLocalhostDevServerStore } from '@/stores/localhostDevServer'
import { Picture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import assign from 'lodash/assign'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ICaseListItem, caseList } from './caseList'

const localhostDevServerStore = useLocalhostDevServerStore()

const caseListData = ref(caseList)

const router = useRouter()

const toCase = (caseItem: ICaseListItem) => {
    const idTxt = caseItem.id ? `?id=${caseItem.id}` : ''
    router.push(`/case/${caseItem.key}${idTxt}`)
}

const getData = async () => {
    const res = await getListUnauth('teachCases', {
        page: 1,
        pageSize: 100,
        attributes: {
            include: ['title', 'key', 'poster'],
            exclude: ['doc'],
        },
    })
    if (!res.success) return
    const caseListMap = caseList.reduce((acc, cur) => {
        acc[cur.key] = cur
        return acc
    }, {} as Record<string, any>)

    res.data.rows.forEach((item: any) => {
        if (caseListMap[item.key]) {
            caseListMap[item.key] = assign(caseListMap[item.key], item)
        }
    })

    caseListData.value = Object.values(caseListMap)

    // console.log(res)
}

onMounted(() => {
    getData()
})

const createCase = async () => {
    const confirm = await ElMessageBox.prompt('请输入案例id', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入案例id，由英文字母、数字、下划线或连字符组成',
        inputPattern: /^[a-zA-Z0-9_-]{1,20}$/,
        inputErrorMessage: '请输入20个字符以内的字母、数字、下划线或连字符',
    })

    if (confirm.action !== 'confirm') return

    const caseKey = confirm.value

    if (!caseKey) return

    const res = await createCaseApi(caseKey)

    if (!res.success) {
        ElMessage.error('创建失败')
    }

    ElMessage.success('创建成功')
}
</script>

<style scoped>
.case-item {
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0px 30px 100px rgba(33, 39, 158, 0.04),
        0px 8px 20px rgba(33, 39, 158, 0.02);
}

.case-item .poster {
    transition: all 0.3s;
}

.case-item:hover .poster {
    transform: scale(1.1);
}

.top-card {
    /* background: linear-gradient(
        90deg,
        #97b5d3,
        #c2ccd1,
        #d0d0e2
    );  */
    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
    background: radial-gradient(
            at 96.49283077073736% 42.87202481763821%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 1) 0%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 0) 100%
        ),
        radial-gradient(
            at 21.072147853117418% 8.332825325753301%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 1)
                0%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 0)
                100%
        ),
        radial-gradient(
            at 78.47940016751653% 87.55551599150111%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 1) 0%,
            hsla(211.03448275862067, 56.862745098039284%, 90%, 0) 100%
        ),
        radial-gradient(
            at 66.39976667942473% 94.72660681024504%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 1)
                0%,
            hsla(251.99999999999994, 38.46153846153849%, 94.90196078431372%, 0)
                100%
        );
}
</style>
